<template>
	<view>
		<view class="accumlate-img">
			<img src="@/static/rank.jpg" alt="" style="width: 100%; height: 100%;" />
		    <view class="check-choose" @click="timeShowBtn">
		    	<view>{{timeChoose}}</view>
		    	<view class="">
		    		<u-icon name="arrow-down-fill"></u-icon>
		    	</view>
		    </view>
		</view>
		<u-picker mode="time" v-model="timeShow" :params="params" @confirm="timeChooseBtn"></u-picker>
	    <view class="accumlate-container" v-for="(item,index) in accumlateList">
			<view class="ac-left">
				<img src="@/static/feature/rank.png" alt="" style="width: 100%; height: 100%;" />
				<view class="ac-rank">01</view>
			</view>
			<view class="ac-avatar">
				<img src="@/static/img.jpg" alt="" style="border-radius: 50%; width: 100%;height: 100%;"/>
			</view>
			<view class="ac-name">zhouzhouzhou</view>
			<view class="ac-zannum"><text style="color: #1585ff;font-size: 34rpx;font-weight: bold;"> 1</text>赞</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeShow: false,
				params: {
					year: true,
					month: true,
				},
				timeChoose:'',
				accumlateList:[1,2,3]
			}
		},
		methods: {
			timeChooseBtn(e) {
				this.timeChoose = e.year +'年'+ e.month+'月'
			},
			timeShowBtn(){
				this.timeShow = true
			}
		},
		onLoad(){
			const now = new Date(); 
			const year = now.getFullYear(); // 年
			const month = now.getMonth() + 1; // 月
			this.timeChoose = `${year}年${month}月`
		}
	}
</script>

<style>
.accumlate-img{
	position: relative;
}
.check-choose {
		display: flex;
		justify-content: space-between;
		width: 280rpx;
		background-color: #292828;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 10rpx;
		border-radius: 40rpx;
		position: absolute;
		bottom: 40rpx;
		left: 20rpx;
		opacity: 0.8;
	}
	.ac-left{
		width: 60rpx;
		height: 60rpx;
		position: relative;
	}
	.ac-rank{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		font-weight: bold;
	}
	.accumlate-container{
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx auto;
		width: 95%;
		border-radius: 16rpx;
		position: relative;
		align-items: center;
		
	}
	.ac-avatar{
		width: 50rpx;
		height: 50rpx;
		margin-left: 40rpx;
	}
	.ac-name{
		margin-left: 20rpx;
		font-weight: bold;
	/* 	margin-top: 6rpx; */
		font-size: 34rpx;
		
	}
	.ac-zannum{
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>